<template>
  <div id="app">
  <chacao>
    <!-- 要想插入指定地方使用具名插槽 -->
    <template v-slot:headers="{f}">
      <h1>我爱吃:{{f}}</h1>
      <div class="headers">头部</div> 
    </template>   

    <template v-slot:mains>
      <div class="mains">主体</div>
    </template> 
    
    <template v-slot:footers>
      <div class="footers">底部</div>
    </template>

<!-- <h1>lalala </h1> -->
    <!-- 默认分发 -->
    <!-- 注意这里的baby是结构chacao里的baby不能乱写 -->
    <template v-slot="{baby}">
      <!-- 上面还可以用变量来接收 此时返回的就是一个对象 -->
      <!-- <h1>{{aa}}</h1> -->
      <h1>姓名:{{baby.name}}</h1>
      <h1>姓名:{{baby.friend}}</h1>
      <h1>姓名:{{baby.boss}}</h1>
    </template>
  </chacao>

    123fs士大夫df
  <parents></parents>

    </div>
</template>

<script>
import parents from "./parent.vue"
import chacao from "./chacao.vue"
export default {
  name: "App",
  components: {
    parents,
    chacao
  }
};

// 总结
//先创建一个parent.vue的文件  这个就是一个组件文件
//然后 在本文件中 导入 parent 文件
//导入的语法 import parents from "./parent.vue"
//这个parents 就是接收的
//然后使用components创建一个parents的组件
//然后将parents组件 渲染在本文件的template内部
</script>

